<template>
  <div class="videoGoods">
    <div class="videoGoods-item" v-for="(item, index) in goodsList" :key="index" @click="onShopDetail(item.goods_sku)">
      <img class="videoGoods-item-img" :src="item.goods_image_main">
      <div class="videoGoods-item-title">{{item.goods_name}}</div>
      <div class="videoGoods-item-price">
        <div class="videoGoods-item-price-text">{{textNewPrice}}</div>
        <div class="videoGoods-item-price-new">￥{{item.internal_price}}</div>
      </div>
      <div class="videoGoods-item-price">
        <div class="videoGoods-item-price-text">{{textOldPrice(item.supplier_id)}}</div>
        <div class="videoGoods-item-price-old">￥{{item.reference_price}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'videoGoods',
    props: {
      goodsList: {
        type: Array
      }
    },
    methods: {
      onShopDetail (sku) {
        this.$router.push({ name: 'mallInfo', params: { id: sku } })
      }
    }
  }
</script>

<style lang="less" scoped>
  * {
    box-sizing: border-box;
  }

  .videoGoods {
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;

    .videoGoods-item {
      background: #fff;
      padding: 2.5px;
      margin-bottom: 5px;
      font-size: 0;
      width: 32%;
      margin-right: 2%;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .videoGoods-item-img {
        width: 100%;
        height: 110px;
        margin-bottom: 7px;
      }

      .videoGoods-item-title {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        color: #191919;
        font-size: 9px;
        margin-bottom: 5px;
        height: 26px;
      }

      .videoGoods-item-price {
        font-size: 8px;
        color: #000;
        display: flex;
        align-items: center;
        margin-bottom: 4px;

        .videoGoods-item-price-text {
          margin-right: 9px;
        }

        .videoGoods-item-price-new {
          font-weight: bold;
          font-size: 12px;
          color: #FF5721;
        }

        .videoGoods-item-price-old {
          font-size: 8px;
          color: #676767;
          text-decoration: line-through;
        }
      }
    }
  }
</style>
